﻿@using Digital.WCFClient.ConfigService
@using System.Collections.ObjectModel
@using Digital.Common.Mvc.Extensions
@using Digital.Web.Controllers
@using Microsoft.AspNet.Identity
@using Digital.Common.Utilities
@model Digital.WCFClient.ConfigService.NewsCategoryModel
@{
    ViewBag.Title = "播报分类管理";
    Layout = "~/Views/Shared/_LayoutDigital.cshtml";
}

@section PageSpecificJavascriptIncludes{
    <link rel="stylesheet" href="../DigitalStyle/css/jquery.gritter.css" />
    <link rel="stylesheet" href="../DigitalStyle/css/bootstrap-fileupload.min.css" />
    <script src="../DigitalStyle/js/jquery.gritter.min.js"></script>
    <script src="../DigitalStyle/js/bootstrap-fileupload.min.js"></script>
    <script src="../DigitalStyle/js/jquery.validate.js"></script>
    <script src="../DigitalStyle/js/JqueryToken.js"></script>
    <script src="../DigitalStyle/js/jquery.autogrow-textarea.js"></script>
    <script src="../DigitalStyle/js/messages_cn.js"></script>
    <script type="text/javascript" src="@Url.StaticFile("/DigitalStyle/js/flashupload.js")"></script>
    <script src="../DigitalStyle/js/formvalidator.js"></script>
}

<div class="pageheader">
    <h2><i class="fa fa-user"></i> 播报分类管理 <span>播报中心</span></h2>
    <div class="breadcrumb-wrapper">
        <span class="label">你的位置:</span>
        <ol class="breadcrumb">
            <li><a href="">企业中心</a></li>
            <li class="active">播报管理</li>
        </ol>
    </div>
</div>

<div class="contentpanel">
    <div class="row">

        <div class="col-sm-12">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <div class="panel-btns">
                        <a href="" class="panel-close">&times;</a>
                        <a href="" class="minimize">&minus;</a>
                    </div><!-- panel-btns -->
                    <h3 class="panel-title">分类管理</h3>
                </div>
                <div class="panel-body">
                    <div class="btn-demo mr10">
                        <a class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg"><i class="fa fa-pencil mr5"></i> 添加顶级分类</a>
                        @*<a class="btn btn-primary"><i class="fa fa-comments mr5"></i> 保存</a>*@
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hidaction table-hover mb30">
                            <thead>
                                <tr>
                                    <th>排序</th>
                                    <th>分类名称</th>
                                    <th>子类</th>
                                    <th>分类图片</th>
                                    <th>分类内容</th>
                                    <th>管理</th>
                                </tr>
                            </thead>
                            <tbody>
                                @{
                                    if (ViewBag.CategoryList != null)
                                    {
                                        var List = (List<NewsCategoryModel>)ViewBag.CategoryList;
                                        var Parent = List.Where(o => o.NewsCategoryParentID == 0).ToList();
                                        foreach (var CategoryMode in Parent)
                                        {
                                            <tr id="tr@{@CategoryMode.NewsCategoryID}">
                                                <td>@CategoryMode.NewsCategoryOrderID</td>
                                                <td>@CategoryMode.NewsCategoryName</td>
                                                <td><a href="javascript:Show(@CategoryMode.NewsCategoryID)"><i class="fa fa-plus-square"></i></a> 添加子类</td>
                                                <td>@CategoryMode.NewsCategoryPicture</td>
                                                <td>@CategoryMode.NewsCategoryContent</td>
                                                <td class="table-action-hide">
                                                    <a href="javascript:CategoryEdit(@CategoryMode.NewsCategoryID,@CategoryMode.NewsCategoryParentID);"><i class="fa fa-pencil" data-toggle="modal" data-target=".bs-example-modal-lg"></i></a>
                                                    <a href="javascript:CategoryDelete(this,@CategoryMode.NewsCategoryID);" class="delete-row"><i class="fa fa-trash-o"></i></a>
                                                </td>
                                            </tr>
                                            var SubChild = List.Where(o => o.NewsCategoryParentID == CategoryMode.NewsCategoryID).ToList();
                                            foreach (var Childs in SubChild)
                                            {
                                                <tr id="tr@{@Childs.NewsCategoryID}">

                                                    <td>@Childs.NewsCategoryOrderID</td>
                                                    <td>@Childs.NewsCategoryName</td>
                                                    <td>@CategoryMode.NewsCategoryName 的子分类</td>
                                                    <td>@Childs.NewsCategoryPicture</td>
                                                    <td>@Childs.NewsCategoryContent</td>
                                                    <td class="table-action-hide">
                                                        <a href="javascript:CategoryEdit(@CategoryMode.NewsCategoryID,@CategoryMode.NewsCategoryParentID);"><i class="fa fa-pencil" data-toggle="modal" data-target=".bs-example-modal-lg"></i></a>
                                                        <a href="javascript:CategoryDelete(this,@CategoryMode.NewsCategoryID);" class="delete-row"><i class="fa fa-trash-o"></i></a>
                                                    </td>
                                                </tr>
                                            }
                                        }

                                    }
                                }
                            </tbody>
                        </table>

                    </div>
                    @*<div class="btn-demo mr10">
                            <button class="btn btn-primary mr5" type="button"><i class="fa fa-pencil mr5"></i> 添加顶级分类</button>
                            <button class="btn btn-primary mr5" type="button"><i class="fa fa-comments mr5"></i> 保存</button>
                        </div>*@
                </div>
            </div><!-- panel -->
        </div><!-- col-sm-6 -->
    </div>
</div>

<div class="alert alert-warning fade in nomargin">
    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">&times;</button>
    <h4>温馨提示</h4>
    <p>
        1、如果您的信息较多，建议设置二级分类，方便用户查找；<br>
        2、建议尽量控制每个分类下的供应产品数量，用户查看更方便；<br>
        3、您设置成功的自定义分类，在您企业店铺显示会有一定时间的延迟。<br>
        4、超过10个自定义分类不允许一次性清空
    </p>

</div>

<div class="modal fade bs-example-modal-lg" id="DetailModel" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button" onclick="javascript:CategoryDIValuesClear();">&times;</button>
                <h4 class="modal-title">顶级分类</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal form-bordered" id="firstForm" onsubmit="return false">
                    @Html.AntiForgeryToken()
                    <input type="hidden" id="ParentId" />
                    <input type="hidden" id="CaseId" />
                    <div class="form-group">
                        <label class="col-sm-3 control-label"><span class="asterisk">*</span> 排序值</label>
                        <div class="col-sm-4">
                            @*<input id="NewsCategoryOrderID" type="text" placeholder="排序值..." value="@Model.NewsCategoryOrderID" class="form-control" required/>*@
                            @Html.TextBoxFor(m => m.NewsCategoryOrderID, new { @class = "form-control", @placeholder = "排序值..." })
                            @Html.ValidationMessageFor(m => m.NewsCategoryOrderID, null, new { @class = "help-inline" })
                            <input type="hidden" id="NewsCategoryID" value="@Model.NewsCategoryID" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label"><span class="asterisk">*</span> 分类名称</label>
                        <div class="col-sm-6">
                            @*<input id="NewsCategoryName" type="text" placeholder="分类名称..." value="@Model.NewsCategoryName" class="form-control" required />*@
                            @Html.TextBoxFor(m => m.NewsCategoryName, new { @class = "form-control", @placeholder = "分类名称..." })
                            @Html.ValidationMessageFor(m => m.NewsCategoryName, null, new { @class = "help-inline" })
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label"><span class="asterisk">*</span> 分类图片</label>
                        <div class="col-sm-6">
                            <div class="fileupload fileupload-new" data-provides="fileupload" id="container">
                                <div class="input-append">
                                    <div class="uneditable-input">
                                        <i class="glyphicon glyphicon-file fileupload-exists"></i>
                                        <span id="filelist" class="fileupload-preview"></span>
                                    </div>
                                    <span class="btn btn-default btn-file">
                                        <span class="fileupload-new">选择分类图片</span>
                                        <span class="fileupload-exists">更改</span>
                                        @*<input id="pickfiles" value="@Model.NewsCategoryPicture" type="file" required />*@
                                        @Html.TextBoxFor(m => m.NewsCategoryPicture, new { @type = "file", @id = "pickfiles" })
                                        @Html.ValidationMessageFor(m => m.NewsCategoryPicture, null, new { @class = "help-inline" })
                                    </span>
                                    <a href="#" id="uploadfiles" class="btn btn-default">上传</a>
                                </div>
                            </div>
                            <input id="ImagePath" type="hidden" value="@Model.NewsCategoryPicture" />

                            <img id="PersonImage" src="@Html.IsNull(Model.NewsCategoryPicture, "../DigitalStyle/images/pic-none.png", Model.NewsCategoryPicture)" class="thumbnail img-responsive" alt="" />

                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label"><span class="asterisk">*</span> 分类内容</label>
                        <div class="col-sm-6">
                            @*<textarea id="NewsCategoryContent" class="form-control" rows="5" cols="10" required>@Model.NewsCategoryContent</textarea>*@
                            @Html.TextAreaFor(m => m.NewsCategoryContent, new { @class = "form-control", @rows = "5" })
                            @Html.ValidationMessageFor(m => m.NewsCategoryContent, null, new { @class = "help-inline" })
                            <span class="help-block">
                                (限制100字以内)
                            </span>
                        </div>
                    </div>

                    <div class="panel-footer">
                        <div class="row">
                            <div class="col-sm-6 col-sm-offset-3">
                                <button class="btn btn-primary" onclick="javascript:Save();">提交</button>&nbsp;
                                <button class="btn btn-default" onclick="javascript:CategoryDIValuesClear();">取消</button>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>




<script>
    function callback(msg) {
        $("#ImagePath").val(msg.msg.url);
        $("#PersonImage")[0].src = msg.msg.url;
    }
    jQuery(document).ready(function () {
        //Textarea Autogrow
        $('#UploadButton').FileUpload({
            'subfolder': 'UserInfo' + '@Digital.Common.CryptoService.MD5Encrypt(User.Identity.GetUserId(),Digital.Common.SerurityType.UserInfoFolder)',
            'ImageId': '',
        });

        // Show aciton upon row hover
        jQuery('.table-hidaction tbody tr').hover(function () {
            jQuery(this).find('.table-action-hide a').animate({ opacity: 1 });
        }, function () {
            jQuery(this).find('.table-action-hide a').animate({ opacity: 0 });
        });

        // With Form Validation Wizard
        var $validator = jQuery("#firstForm").validate({
            rules: {
                NewsCategoryOrderID: {
                    required: true,
                    isContainsSpecialChar: true,
                    numberCheck:true
                },
                NewsCategoryName: {
                    required: true,
                    isContainsSpecialChar: true
                },
                NewsCategoryPicture: {
                    required: true
                },
                NewsCategoryContent: {
                    required: true,
                    stringContentCheck: [1, 200]
                }
            },
            messages: {
                NewsCategoryOrderID: {
                    required: "请输入类别排序值",
                    isContainsSpecialChar: "含有中英文特殊字符",
                    numberCheck: "只能包括数字"
                },
                NewsCategoryName: {
                    required: "请输入类别名称",
                    isContainsSpecialChar: "含有中英文特殊字符"
                },
                NewsCategoryPicture: {
                    required: "请选择类别图片",
                },
                NewsCategoryContent: {
                    required: "请输入类别内容",
                    stringContentCheck: $.validator.format("请确保内容输入{0}-{1}字节以内")
                }
            },
            highlight: function (element) {
                jQuery(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                jQuery(element).closest('.form-group').removeClass('has-error');
            },
            focusInvalid: false,
            onkeyup: false,
            ignore: '',
            errorPlacement: function (error, element) {
                error.insertAfter($(element).parent().children().last());
            }
        });

    });

    function Refresh() {
        window.location = window.location;
    }

    function Edit(Id, Parent) {
        var OrderId = $("#tr" + Id).children().eq(0).text();

        var Name = $("#tr" + Id).children().eq(1).text();
        var Image = $("#tr" + Id).children().eq(3).text();
        var Content = $("#tr" + Id).children().eq(4).text();
        $("#CaseId").val(Id);
        $("#NewsCategoryName").val(Name);
        $("#NewsCategoryOrderID").val(OrderId);
        $("#PersonImage")[0].src = Image;
        $("#ImagePath").val(Image);
        $("#NewsCategoryContent").val(Content);
        $("#ParentId").val(Parent);
        $("#DetailModel").modal("show");
    }
    // For News Category High Level Add Operation
    function Save() {
        var $valid = jQuery('#firstForm').valid();
        if (!$valid) {
            return false;
        }
        else {
            var IsInsert = 1; // default option : insert new company model
            var NewsCategoryID = 0; // default option : insert new company model

            //------------------TAB 01 : 播报类别信息
            var valNewsCategoryOrderID = $.jsparams.input("NewsCategoryOrderID");
            var valNewsCategoryName = $.jsparams.input("NewsCategoryName");
            var valNewsCategoryPicture = $.jsparams.input("ImagePath");
            var valNewsCategoryContent = $.jsparams.input("NewsCategoryContent");
            var valNewsCategoryParentID = $.jsparams.input("ParentId");
            if (valNewsCategoryParentID == "") {
                valNewsCategoryParentID = 0;
            }

            var valNewsCategoryID = $.jsparams.input("CaseId");
            if (valNewsCategoryID != "") {
                NewsCategoryID = valNewsCategoryID * 1;
            }
            if (NewsCategoryID > 0) {
                IsInsert = 0;
            }


            var datas = {
                CategoryID: NewsCategoryID, IsInsert: IsInsert, NewsCategoryName: valNewsCategoryName, NewsCategoryPicture: valNewsCategoryPicture,
                NewsCategoryContent: valNewsCategoryContent, NewsCategoryParentID: valNewsCategoryParentID, NewsCategoryOrderID: valNewsCategoryOrderID
            };
            ComAjax("/Company/CompanyNewsCategoryEdit", datas, "播报分类信息", "Refresh");

            // 1. after success , need do close DIV Display
            // 2. refresh current page
        }
    }

    // DIV category fields display , Clear Input Values
    function CategoryDIValuesClear() {
        $("#NewsCategoryName").val("");
        $("#NewsCategoryID").val("");
        $("#PersonImage")[0].src = '../DigitalStyle/images/pic-none.png';
        $("#ImagePath").val('../DigitalStyle/images/pic-none.png');
        $("#NewsCategoryContent").val("");
        $("#CaseId").val(0);
        $("#ParentId").val("");
    }
    function Show(ParentId) {
        $("#NewsCategoryName").val("");
        $("#NewsCategoryID").val("");
        $("#PersonImage")[0].src = '../DigitalStyle/images/pic-none.png';
        $("#ImagePath").val('../DigitalStyle/images/pic-none.png');
        $("#NewsCategoryContent").val("");
        $("#DetailModel").modal("show");
        $("#CaseId").val(0);
        $("#ParentId").val(ParentId);
    }
    // For News Category High Level Edit Operation , DIV category fields display
    function CategoryEdit(CategoryID, Parent) {
        Edit(CategoryID, Parent)
        //var $valid = jQuery('#firstForm').valid();
        //if (!$valid) {
        //    $validator.focusInvalid();
        //    return false;
        //}
        //else {
        //    var datas = { CategoryID: parseInt(CategoryID) };
        //    ComAjaxJson("/Company/CompanyNewsCategoryByID", datas, CategoryDisplay);
        //}
    }

    function CategoryDisplay(dataJson) {
        var obj = eval(dataJson);
        $("#NewsCategoryID").val(obj[0].NewsCategoryID);
        $("#NewsCategoryOrderID").val(obj[0].NewsCategoryOrderID);
        $("#NewsCategoryName").val(obj[0].NewsCategoryName);
        $("#ImagePath").val(obj[0].NewsCategoryPicture);
        $("#NewsCategoryContent").val(obj[0].NewsCategoryContent);
    }

    // For News Category High Level Delete Operation
    function CategoryDelete(Sender, CategoryID) {
        // Delete row in a table
        //jQuery('.delete-row').click(function () {

        //});
        var c = confirm("Continue delete?");
        if (c) {
            var datas = { CategoryID: parseInt(CategoryID) };
            ComAjax("/Company/CompanyNewsCategoryDelete", datas, "播报分类信息", "Refresh");

            // remove current row
            //jQuery(Sender).closest('tr').remove();
            // refresh current page
        }
        else {
            return false;
        }
    }


</script>
